<template>
  <view class="commission">
    <view class="userInfo">
      <image src="../static/logo.png" mode="" class="userInfo_img"></image>
      <view class="userInfo_name">
        张三三
      </view>
      <view class="userInfo_num">
        微信号：A3333
      </view>
      <!-- <u-icon class="userInfo_icon" name="arrow-right" color="#CDCDCD" size="40"></u-icon> -->
    </view>

    <view class="cs_header t-ju-around">
      <view class="cs_hd_left">
        <view>23132.0</view>
        <view>代收佣金(元)</view>
      </view>
      <view class="cs_hd_shu"></view>
      <view class="cs_hd_right">
        <view>123123.0</view>
        <view>累积佣金(元)</view>
      </view>
    </view>

    <!-- 筛选条件 -->
    <view class="cs_select t-ju-between">
      <view class="title">
        佣金发放明细
      </view>
      <u-dropdown class="cs_se_item">
        <u-dropdown-item v-model="value" title="全部" :options="options" @change="change"></u-dropdown-item>
      </u-dropdown>
    </view>
    <!-- 列表 -->
    <view class="cs_list">
      <view class="t-ju-between">
        <view class="span1">
          待分用
        </view>
        <view class="span2">
          +￥50
        </view>
      </view>
      <view class="t-ju-between">
        <view class="span3">
          设计套餐一
        </view>
        <view class="span4">
          2023-04-12 14:38:09
        </view>
      </view>
    </view>
    <view class="cs_list">
      <view class="t-ju-between">
        <view class="span1">
          待分用
        </view>
        <view class="span2">
          +￥50
        </view>
      </view>
      <view class="t-ju-between">
        <view class="span3">
          设计套餐一
        </view>
        <view class="span4">
          2023-04-12 14:38:09
        </view>
      </view>
    </view>
    <view class="cs_list">
      <view class="t-ju-between">
        <view class="span1">
          待分用
        </view>
        <view class="span2">
          +￥50
        </view>
      </view>
      <view class="t-ju-between">
        <view class="span3">
          设计套餐一
        </view>
        <view class="span4">
          2023-04-12 14:38:09
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  const value = ref('')
  const options = ref([{
      label: '默认排序',
      value: 1,
    },
    {
      label: '距离优先',
      value: 2,
    },
    {
      label: '价格优先',
      value: 3,
    }
  ])

  const change = (e) => {
    console.log(e, '选中的东西');
  }
</script>

<style lang="scss">
  .userInfo {
    margin-bottom: 20rpx;
    width: 100%;
    position: relative;
    height: 120rpx;
    background-color: #fff;

    .userInfo_img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 30rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .userInfo_name {
      position: absolute;
      top: 20rpx;
      left: 125rpx;
      font-size: 28rpx;
    }

    .userInfo_num {
      position: absolute;
      font-size: 28rpx;
      top: 60rpx;
      left: 125rpx;
      color: #CDCDCD;
    }

    .userInfo_icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 30rpx;
    }
  }

  .commission {

    .cs_header {
      margin-bottom: 20rpx;
      padding: 30rpx;
      background-color: #fff;

      .cs_hd_left,
      .cs_hd_right {
        font-size: 24rpx;
        line-height: 40rpx;
        text-align: center;
      }

      .cs_hd_shu {
        height: 80rpx;
        border-right: 2rpx solid #D7D7D7;
      }
    }


    .cs_select {
      margin-bottom: 5rpx;
      padding: 10rpx 30rpx;
      background-color: #fff;

      .title {
        flex: 3;
        font-size: 28rpx;
        font-weight: 700;
      }

      .cs_se_item {
        .u-dropdown__content__mask {
          background-color: transparent;
        }

        // width: 300rpx !important;
      }
    }

    .cs_list {
      padding: 10rpx 30rpx;
      background-color: #fff;
      font-size: 24rpx;
      line-height: 50rpx;

      .span2 {
        font-weight: 700;
      }

      .span3,
      .span4 {
        color: #8A8A8A;
      }
    }
  }
</style>